<template>
  <div class="column full-height">
    <q-scroll-area class="col full-height">
      <q-list class="drawer" padding>
        <static-item v-bind="HomeItem" />
        <static-item v-bind="ConnectionItem" v-if="showConnectionsItem" />
        <static-item v-bind="LibraryItem" v-if="showLibraryItem" />
        <static-item v-bind="ContentItem" v-if="showContentItem" />
        <static-item
          v-bind="AnalyticsItem"
          v-if="showAnalyticsItem && currentUser"
        />
        <!-- <video-item v-for="video in videoList" :key="video.id" v-bind="video" /> -->
        <shortcut-item
          v-for="(item, index) in shortcutList"
          :key="index"
          v-bind="item"
        />
      </q-list>
    </q-scroll-area>

    <q-btn
      flat
      fab
      class="self-center"
      icon="mdi-cog"
      @click="showSettingDialog = true"
      v-if="currentUser"
    />
  </div>

  <q-dialog
    v-model="showSettingDialog"
    persistent
    maximized
    transition-show="slide-up"
    transition-hide="slide-down"
  >
    <settings></settings>
  </q-dialog>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import StaticItem from './StaticItem.vue';
import Settings from 'components/settings/Settings.vue';
import PinnedItem from 'src/models/PinnedItem';
import ShortcutItem from './PinnedItem.vue';
import { useUserStore } from 'src/stores/user-store';
import { useGlobalStore } from 'stores/global-store';
const userStore = useUserStore();
const globalStore = useGlobalStore();
const currentUser = computed(() => userStore.currentUser);
const showSettingDialog = computed({
  get() {
    return globalStore.showSettingDialog;
  },
  set(value: boolean) {
    globalStore.showSettingDialog = value;
  },
});
const shortcutList = computed<PinnedItem[]>(() => userStore.shortcuts);
onMounted(async () => {
  if (currentUser.value) {
    await userStore.getShortcuts();
  }
});
watch(currentUser, async () => {
  if (currentUser.value) {
    await userStore.getShortcuts();
  } else {
    userStore.shortcuts = [];
  }
});
const HomeItem = ref({
  name: 'Home',
  icon: 'home',
  link: 'Home',
  activeClass: 'home-color',
});
const ConnectionItem = ref({
  name: 'MyConnections',
  icon: 'people',
  link: 'Connections',
  activeClass: 'connection-color',
});
const LibraryItem = ref({
  name: 'MyLibrary',
  icon: 'layers',
  link: 'Library',
  activeClass: 'library-color',
});
const ContentItem = ref({
  name: 'My Contents',
  icon: 'mdi-play-box',
  link: 'MyContents',
  activeClass: 'content-color',
});

const AnalyticsItem = ref({
  name: 'Analytics',
  icon: 'mdi-chart-box',
  link: 'Analytics',
  activeClass: 'analytics-color',
});
const showConnectionsItem = computed(() => globalStore.showMyConnections);
const showLibraryItem = computed(() => globalStore.showMyLibrary);
const showContentItem = computed(() => globalStore.showMyContent);
const showAnalyticsItem = computed(() => globalStore.showAnalytics);
</script>
<style lang="sass" scoped>

.drawer
  background-color: transparent
  height: calc(100% - 48px)
  min-height: calc(100vh - 118px)
  box-shadow: inset -4px 0px 6px 0px rgba(0, 0, 0, .32)
</style>
